<template>
  <div style="margin: 0 auto;width: 700px;">
    <div style="background-color: #42b983">
      <el-input  v-model="formObject.title" placeholder="输入文章标题"></el-input>
    </div>
    <div style="height: 80%;margin-top: 10px">
<!--      <quill-editor style="height: 300px"-->
<!--                    v-model="formObject.content"-->
<!--                    ref="myQuillEditor"-->
<!--                    :options="editorOption"-->
<!--                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"-->
<!--                    @change="onEditorChange($event)">-->
<!--      </quill-editor>-->
      <editor id="editor_id" height="500px" width="700px" :content.sync="formObject.content"
              :afterChange="afterChange()"
              :loadStyleMode="false"
              @on-content-change="onContentChange"></editor>

    </div>



    <div style="margin-top: 100px;text-align:left">
      <div style="margin: 0">
        <span >文章标签：</span>
        <el-tag
                :key="tag"
                v-for="tag in articleTags"
                closable
                :disable-transitions="false"
                @close="handleArticleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputArticleVisible"
                v-model="inputArticleValue"
                ref="saveArticleTagInput"
                size="small"
                @keyup.enter.native="handleArticleInputConfirm"
                @blur="handleArticleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showArticleInput">+ New Tag</el-button>
        <br/>
        <span style="font-size: 8px;color: #42b983;margin-left: 100px">最多添加5个标签</span>
      </div>


      <div style="margin-top: 20px">
        <span >分类专栏：</span>
        <el-tag
                :key="tag"
                v-for="tag in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
        <br/>
        <span style="font-size: 8px;color: #42b983;margin-left: 100px">最多添加3个专栏</span>
      </div>


      <div style="margin-top: 20px">
        <span>文章类型：</span>
        <el-select v-model="formObject.blogType" placeholder="请选择">
          <el-option label="原创" value="0"></el-option>
          <el-option label="转载" value="1"></el-option>
          <el-option label="翻译" value="2"></el-option>
        </el-select>


      </div>

      <div style="margin-top: 20px">
        <span>发布形式：</span>
        <el-radio-group v-model="formObject.releaseType">
          <el-radio label=0 value="0">公开</el-radio>
          <el-radio label=1 value="1">私密</el-radio>
          <el-radio label=2 value="2">粉丝可见</el-radio>
          <el-radio label=3 value="3">VIP可见</el-radio>
        </el-radio-group>


      </div>

      <div style="margin-top: 10px;margin-bottom: 20px">
        <el-button  v-on:click="saveHtml">发布博客</el-button>
      </div>
    </div>



  </div>


</template>

<script>
  import kindeditor from '../../components/Kindeditor.vue'
  import {postReq} from "../../utils/api";
  export default {
    name: "Install",
    components:{
      kindeditor
    },
    data(){
      return {

        editorOption: {},
        articleTags: [],
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        inputArticleVisible: false,
        inputArticleValue: '',
        formObject:{
          title:undefined,
          blogType:undefined,
          releaseType:undefined,
          content: undefined,
        }
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    methods:{
      saveHtml:function(event){
        console.log(event);
        let data = this.formObject;
        if (data.title === undefined || '' === data.title) {
          this.$message({
            message: '文章标题不能为空！',
            type: 'warning'
          });
          return false;
        }


        if (data.content === undefined || '' === data.content) {
          this.$message({
            message: '文章内容不能为空！',
            type: 'warning'
          });
          return false;
        }

        if (data.blogType === undefined || '' === data.blogType) {
          this.$message({
            message: '请选择文章类型！',
            type: 'warning'
          });
          return false;
        }

        if (data.releaseType === undefined || '' === data.releaseType) {
          this.$message({
            message: '请选择发布类型！',
            type: 'warning'
          });
          return false;
        }

        data.labels = this.articleTags;
        data.classifys = this.dynamicTags;
        postReq('/api/blog/add_blog',data).then(res=>{
          if (res.data.data) {
            this.$message({
              message: '发布成功！',
              type: 'success'
            });
          }

        }).catch(err=>{
          console.log(err)
        });
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      handleArticleClose(tag) {
        this.articleTags.splice(this.articleTags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        if (this.dynamicTags.length>2){
          this.inputVisible = false;
          return false;
        }
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      showArticleInput() {
        this.inputArticleVisible = true;
        console.log(this.articleTags.length)
        if (this.articleTags.length>4){
          this.inputArticleVisible = false;
          return false;
        }
        this.$nextTick(_ => {
          this.$refs.saveArticleTagInput.$refs.input.focus();
        });
      },

      onContentChange (val) {
        console.log(val)
        this.formObject.content=val
      },
      afterChange () {
      },
      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (this.dynamicTags.indexOf(inputValue)>-1){
          this.$message({
            message: '专栏添加重复请确认！',
            type: 'warning'
          });
          return false;
        }
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      handleArticleInputConfirm() {
        let inputValue = this.inputArticleValue;
        if (this.articleTags.indexOf(inputValue)>-1){
          this.$message({
            message: '标签添加重复请确认！',
            type: 'warning'
          });
          return false;
        }
        if (inputValue) {
          this.articleTags.push(inputValue);
        }
        this.inputArticleVisible = false;
        this.inputArticleValue = '';
      }



    }

  }
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
